<template>
  <view class="center">
    <u-navbar
      :is-back="false"
      title="我的"
      title-color="white"
      :border-bottom="false"
      back-icon-color="white"
      :background="background"
      title-size="34"
      height="110"
    ></u-navbar>
    <view class="u-flex user-box">
      <view class="u-flex use-in" @click="profile">
        <view class="u-m-r-20 u-p-l-30 u-p-t-30 u-p-b-30">
          <u-avatar :key="rendIndex" :src="avatarUrl" size="140"></u-avatar>
        </view>
        <!-- <view class="u-flex u-row-between">
          <view style="width: 100px" class="u-font-14 u-tips-color">{{ vuex_user.nickName || '游客' }}</view>
          <view v-if="vuex_vip.type" style="width: 160px" class="u-font-14 u-tips-color">
            <view class="u-flex">
              <u-image style="padding-right: 6rpx" width="42rpx" height="42rpx" :src="vuex_vip.url"></u-image>
              <view> {{ vuex_vip.name }} </view>
            </view>
            <view style="padding-top: 10rpx">到期：{{ vuex_vip.endTime }}</view>
          </view>
        </view> -->
      </view>
    </view>
    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item title="个人中心" @click="setting">
          <u-image style="padding-right: 20rpx" slot="icon" width="32rpx" height="42rpx" :src="person"></u-image>
        </u-cell-item>
      </u-cell-group>
    </view>

    <!-- <view>
      <u-cell-group>
        <u-cell-item title="会员中心" @click="goVip">
          <u-image style="padding-right: 20rpx" slot="icon" width="42rpx" height="42rpx" src="/static/会员1.png"></u-image>
        </u-cell-item>
      </u-cell-group>
    </view> -->

    <!-- <uni-collapse ref="collapse" v-model="value">
      <uni-collapse-item>
        <template v-slot:title>
          <view class="share">
            <u-image style="padding-right: 20rpx" slot="title-all" width="42rpx" height="42rpx" src="/static/QQ.png"></u-image>
            <span>技术群分享</span>
          </view>
        </template>

        <view class="content">
          <view>长按二维码识别加入群聊</view>
          <view class="img">
            <u-image src="/static/qun.jpg" width="300rpx" mode="widthFix" />
          </view>

        </view>
      </uni-collapse-item>
    </uni-collapse> -->
    <view>
      <u-cell-group>
        <button open-type="contact" class="contact" bindcontact="handleContact" session-from="sessionFrom">
          <view class="below">
            <!-- <u-image style="padding-right: 20rpx" slot="icon" width="32rpx" height="42rpx" src="/static/会员1.png"></u-image> -->
            <span style="line-height: 63rpx">联系客服</span>
          </view>
        </button>
      </u-cell-group>
    </view>
    <!-- <outher v-model="showPop" @sucess="goVip"></outher> -->
  </view>
</template>

<script>
import outher from '../login/outher.vue'
import { mapState } from 'vuex'
import { baseURL } from 'api/constant.js'
import { getVip } from 'api/vip.js'
import { membershipLevels } from './utils'
export default {
  components: {
    outher
  },
  data() {
    return {
      showPop: false,
      value: '',
      person: '/static/个人.png',
      rendIndex: 0,
      show: true,
      background: {
        // 导航栏背景图
        background: `url(${this.$filePath}bg.svg) no-repeat`,
        // 还可以设置背景图size属性
        backgroundSize: 'cover'
      }
    }
  },
  computed: {
    ...mapState(['vuex_user', 'vuex_vip', 'vuex_token']),
    avatarUrl() {
      return baseURL + '/' + this.vuex_user.avatarUrl
    },

    filePath() {
      return this.$filePath
    }
  },

  onShow: function (e) {
    const a = wx.getLaunchOptionsSync()
    console.log(a, '刷新图片')
    this.rendIndex++
    this.getuserVip()
  },
  created() {},
  methods: {
    async getuserVip() {
      const { data } = await getVip()
      console.log(data, 'res')
      if (data.userVip) {
        const ele = data.userVip
        const obj = membershipLevels.find(o => o.type == ele.type)
        this.$u.vuex('vuex_vip', { ...obj, ...ele })
      }
    },
    logout() {
      // 登录成功修改token与用户信息
      this.$u.vuex('vuex_token', '')
      this.$u.vuex('vuex_user', {})
      this.$u.vuex('vuex_vip', {})
      this.$u.route('/pages/week/index')
    },
    profile() {
      this.$u.route('/pages/profile/profile')
    },
    setting() {
      this.$u.route('/pages/profile/setting')
    },
    goVip() {
      if (!this.vuex_token) {
        this.showPop = true
        return
      }
    //  this.$u.route('/pages/center/vip')
    }
  }
}
</script>

<style lang="scss">
.content {
  text-align: center;
}
.share {
  height: 108rpx;
  padding: 26rpx 32rpx;
  display: flex;
}
.below {
  height: 108rpx;
  font-size: 30rpx;
  padding: 26rpx 12rpx 26rpx;
  display: flex;
}
.ma-title {
  font-size: 30rpx;
  margin-top: 20rpx;
}
.ma-button {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #9b9c9f;
}
.center {
  .u-navbar-inner {
    margin-top: 16rpx;

    align-items: flex-start !important;
  }
}
.user-box {
  justify-content: space-between;
  background: linear-gradient(to bottom, #117aff, #0866ff);
}
.use-in {
  margin-top: 20rpx;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  width: 100%;
  background-color: #fff;
}

.center-nav {
  background-color: #ffffff;
  margin-top: 30rpx;
  padding: 30rpx 0;
  border-radius: 8px;
  .tabName {
    color: #606266;
    font-size: 26rpx;
    padding-top: 10rpx;
  }
}

.qiandao {
  color: #606266;
  font-size: 24rpx;
  margin-right: 24rpx;
  margin-top: 54rpx;
  justify-content: center;
  align-items: center;
}

.clearBtn {
  margin: 0;
  padding: 0;
  line-height: 1;
  background-color: #ffffff;
}

.clearBtn::after {
  position: unset !important;
  border: unset;
}
.contact {
  font-size: 28rpx;
}
.img {
  display: flex;
  justify-content: center;
  padding-top: 10rpx;
}
.u-m-t-20 {
  text-align: center;
}
</style>
